<template>
<div id="home-index">
  <navigation></navigation>
  <div class="banner">
    <p>SPECIALIZE IN</p>
    <p>AMERICAN STUDY</p>
    <p>专注美国留学</p>
    <div></div>
  </div>
  <div class="contect">
    <div>
      <p>咨询热线</p>
      <div></div>
      <a :href="'tel:' +  data.phone">{{data.phone}}</a>
    </div>

    <div>
      <p>咨询微信</p>
      <div></div>
      <p>{{data.wechat}}</p>
    </div>
    <div>
    </div>
  </div>
  <div class="intro">
    <p>青胜简介</p>
    <p>YOUNG WINS INTRODUCTION</p>
    <div></div>
    <p>青胜留学隶属碗礁一号教育集团旗下高端留学申请服务分公司，独树一帜的优势在于汇聚180多位美国各大名校的前任招生办官员和顶级院校的合作资源，他们分别来自哈佛大学、耶鲁大学、普林斯顿大学、斯坦福大学、哥伦比亚大学、宾夕法尼亚大学、康奈尔大学、加州伯克利大学等常春藤及知名学府，为学生和家长提供全方位的咨询辅导和高端申请服务</p>
    <p @click="goPage('/history')">查看更多</p>
  </div>
  <div class="welcome">
    <p>欢迎来到青胜留学</p>
    <p>WELCOME TO TSING SHENG STUDY ABROAD</p>
    <div class="black"></div>
    <div class="image">
      <div class="intro-1" @click="goPage('/service/highSchool')">
        <p>美国高中</p>
      </div>
      <div class="intro-2" @click="goPage('/service/undergraduate')">
        <p>美国本科</p>
      </div>
      <div class="intro-3" @click="goPage('/service/master')">
        <p>美国硕博</p>
      </div>
      <div class="intro-4" @click="goPage('/service/leader_plan')">
        <p>艺术留学</p>
      </div>
      <div class="intro-5" @click="goPage('/service/art')">
        <p>TOP30名校合作录取</p>
      </div>
      <div class="intro-6" @click="goPage('/service/top')">
        <p>常青藤</p>
      </div>
    </div>
  </div>
  <video poster="../../assets/images/home/poster.jpg" controls="" name="media" width="100%"><source src="https://1257328390.vod2.myqcloud.com/5f781e67vodgzp1257328390/01b3b7ea5285890781777127100/4Jo3Y7S6WSIA.mp4" type="video/mp4"></video>
  <div class="recruit">
    <div class="title">
      <p>招生官团队</p>
      <p>ADMISSIONS OFFICER TEAM</p>
      <div></div>
    </div>
    <div class="images">
      <div v-for="(item, index) of data.teacher" :key="index" class="img">
        <img :src="item.picture" />
        <div class="top">
          <p class="name">{{item.name}}</p>
          <p class="job">招办工作经历</p>
        </div>
        <div class="bottom">
          <p class="describe">{{item.experience}}</p>
        </div>
      </div>

      <p @click="goPage('/team')" class="more">查看更多</p>
    </div>
  </div>
  <div class="background-improve">
    <p>留学背景提升</p>
    <p>STUDY BACKGROUND UPGRADE</p>
    <div></div>
    <p>背景提升项目是申请过程中非常重要的一项服务，通过文书和作品来向招生官呈现学生卓越的学术水平，青胜留学为藤校梦想的学员们提供独家渠道和多元化的背景项目，海外科研期刊发表、卓越的艺术作品导师、强势的商科领导项目、充满创意的科技竞赛等。</p>
    <p @click="goPage('/background_ascension')">查看更多</p>
  </div>
  <div class="success-case">
    <p>成功案例</p>
    <p>SUCCESS CASE</p>
    <div class="item"></div>
    <div class="case-container">
      <div class="case-item">
        <img src="../../assets/images/home/case-1.jpg" />
        <div class="item-desc">
          <div><span>12</span>人</div>
          <div></div>
          <div><img src="../../assets/images/home/case-1-logo.png" /><span>芝加哥大学</span></div>
        </div>
      </div>
      <div class="case-item">
        <img src="../../assets/images/home/case-2.jpg" />
        <div class="item-desc">
          <div><span>53</span>人</div>
          <div></div>
          <div><img src="../../assets/images/home/case-2-logo.png" /><span>哥伦比亚大学</span></div>
        </div>
      </div>
      <div class="case-item">
        <img src="../../assets/images/home/case-3.jpg" />
        <div class="item-desc">
          <div><span>13</span>人</div>
          <div></div>
          <div><img src="../../assets/images/home/case-3-logo.png" /><span>约翰霍普金斯大学</span></div>
        </div>
      </div>
      <div class="case-item">
        <img src="../../assets/images/home/case-4.jpg" />
        <div class="item-desc">
          <div><span>53</span>人</div>
          <div></div>
          <div><img src="../../assets/images/home/case-4-logo.png" /><span>宾夕法尼亚大学</span></div>
        </div>
      </div>
      <div class="case-item">
        <img src="../../assets/images/home/case-5.jpg" />
        <div class="item-desc">
          <div><span>49</span>人</div>
          <div></div>
          <div><img src="../../assets/images/home/case-5-logo.png" /><span>斯坦福大学</span></div>
        </div>
      </div>
      <div class="case-item">
        <img src="../../assets/images/home/case-6.jpg" />
        <div class="item-desc">
          <div><span>32</span>人</div>
          <div></div>
          <div><img src="../../assets/images/home/case-6-logo.png" /><span>麻省理工大学</span></div>
        </div>
      </div>
      <p @click="goPage('/success_case')" class="more">查看更多</p>
    </div>
  </div>
  <div class="info-center">
    <p>资讯中心</p>
    <p>INFORMATION CENTRE</p>
    <div class="item"></div>
    <div v-for="(item, index) of data.news" :key="index" @click="showDetail(item.id)" class="info-container">
      <img :src="item.picture" />
      <div>
        <p>{{item.name}}</p>
        <p>{{ item.description}}</p>
        <p>{{item.publish}}</p>
      </div>
    </div>
    <p @click="goPage('/news')" class="more">查看更多</p>
  </div>
  <div class="secientific">
    <p>科研与实习</p>
    <p>SCIENTIFIC RESEARCH AND PRACTICE</p>
    <div class="item"></div>
    <div class="imgs">
      <img src="../../assets/images/home/logos.png" />
    </div>
  </div>
  <pageFooter></pageFooter>
</div>
</template>
<script>
import navigation from "@/components/navigation/index";
import pageFooter from "@/components/footer/index";

import {
  NetworkUtil
} from "@/lib/util"

export default {
  components: {
    navigation,
    pageFooter
  },
  data() {
    return {
      data: {}
    }
  },
  created() {
    NetworkUtil.request({
      url: '/api/index',
      method: 'get'
    }, info => {
      this.data = info
      // for (let item of this.data.teacher) {
      //   item.picture = 'https://www.keywinus.com/' + item.picture
      // }
      // for (let item of this.data.news) {
      //   item.picture = 'https://www.keywinus.com/' + item.picture
      // }
    }, err => {
      console.log(err)
    }, {
      cacheName: 'index',
      cacheTime: 1800000,
      isNow: true
    })
  },
  methods: {
    goPage(path) {
      this.$router.push(path)
    },
    showDetail(id) {
      this.$router.push({
        name: 'articleDetail',
        params: {
          id: id
        }
      })
    }
  }
}
</script>
<style lang="less" rel="stylesheet/less">
@import "index.less";
.video-js .vjs-big-play-button {}
</style>
